<template>
<div id="findcar">
<!-- <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
  <span>要自动定位现在的位置吗?</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="positioning">确 定</el-button>
  </span>
</el-dialog> -->

<!--按地址搜索附近车位信息-->

<el-container>
   <el-aside width="400px">

        <!--小地图板块-->
      <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:600px" @click="getClickInfo" :scroll-wheel-zoom='true' id="map">
    </baidu-map>

    </el-aside>
  <el-container>
     <el-header>

    <!--搜索板块-->
   <el-form :inline="true"  class="demo-form-inline">
  <el-form-item label="车位地址搜索">
    <el-input v-model="input" placeholder="车位地址搜索"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>
</el-form>

  </el-header>
    <el-main>

        <!--展示板块-->
      <el-table
    :data="parkingspaces"
    style="width: 100%">
    <el-table-column
      label="车位图"
      width="280">
      <template slot-scope="scope">
        <el-image style="width: 200px; height: 240px" :src="scope.row.parkingSpacePic" fit="contain"></el-image>
        <!-- <img :src="scope.row.parkingSpacePic" alt="" height="200" width="240"> -->
      </template>
    </el-table-column>
     <el-table-column
      label="出租开始时间"
      width="190">
      <template slot-scope="scope">
         <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.rentStartTime }}</span>
      </template>
    </el-table-column>
      <el-table-column
      label="出租结束时间"
      width="190">
      <template slot-scope="scope">
          <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.rentEndTime }}</span>
      </template>
    </el-table-column>
   <el-table-column
      label="车位地址"
      width="170">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>经度: {{ scope.row.pointX }}</p>
          <p>纬度: {{ scope.row.pointY }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.parkingSpaceAddr }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
      <el-table-column
      label="租金"
      width="130">
      <template slot-scope="scope">
          <i class="el-icon-coin"></i>
        <span style="margin-left: 10px">{{ scope.row.cost }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"> <i class="el-icon-sold-out"></i>租赁</el-button>
      </template>
    </el-table-column>
  </el-table>

    </el-main>
  </el-container>
</el-container>

<!-- 订单弹出框-->
<el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :with-header="false">
  <!-- <span>我来啦!</span> -->
  <h2>车位信息</h2>
  车位地址:{{rentinfo.parkingSpaceAddr}}
  <br><br>
  <div>
     <i class="el-icon-time"></i>
    租赁时间:{{rentinfo.rentStartTime}}--{{rentinfo.rentEndTime}}
  </div>
<br><br>
<div>
  租金:{{rentinfo.cost}}
</div>
<br><h2>出租人信息</h2>
<img :src="lessorinfo.userPic" alt="" width="70" height="70">
<div>姓名:{{lessorinfo.username}}</div>
<div>联系电话:{{lessorinfo.phone}}</div>
<br><br><br><br>
<span><i class="el-icon-truck"></i>请选择你要停入车位的车牌号</span><br>
<el-select v-model="valuea" placeholder="请选择">
    <el-option
      v-for="item in carinfo"
      :key="item.carInfoId"
      :label="item.carNo"
      :value="item.carNo">
    </el-option>
  </el-select>
  <br>
  <span><i class="el-icon-sold-out"></i>请选择支付方式</span><br>
  <el-select v-model="valueb" placeholder="请选择">
    <el-option
      v-for="item in paytype"
      :key="item.id"
      :label="item.typename"
      :value="item.typename">
    </el-option>
  </el-select>
<br><br><br>
<el-button type="danger" round @click="submit">确认订单</el-button>
</el-drawer>

</div>
</template>


<style>
#map{
  width: 400px;
  height: 300px;
}
</style>




<script>


export default {
  name: 'findcar',
  data(){
      return {
            // dialogVisible:false,
            point:{x:109.49926175379778, y:36.60449676862417},
            parkingspaces:[],
            drawer: false,
            rentinfo:{},  
            lessorinfo:{},
            carinfo:[],
            valuea:'',
            valueb:'',
            input:"",
            paytype:[{typename:"钱包支付",id:1},{typename:"支付宝支付",id:2}],
            center: {lng: 106.53192378474633, lat: 29.591551503735314},
            zoom: 13,
            }
  },
  methods:{
    //自动获取用户当前经纬度
      //  positioning(){
      //      this.dialogVisible = false;
      //       this.$jsonp('https://api.map.baidu.com/location/ip?ak=nx5he56j8XZDIhXpih2eSaG8OdcHcpqc&ip=&coor=bd09ll' , {
      //       }).then((res)=>{
      //       　//console.log(res);
      //           this.point=res.content.point;
      //           console.log(this.point)
      //       })
      //  },
      //根据地址获得经纬度
    onSubmit(){
      if(this.input==""){
         this.$message("请先输入地址");
        return 
      }
      this.$jsonp('http://api.map.baidu.com/geocoding/v3/', {
          address: this.input,
          output: 'json',
          ak: "nx5he56j8XZDIhXpih2eSaG8OdcHcpqc"
        }).then(json => {
          // 得到我们想要的内容
           this.$http.get("/nearbyparking",{
               params: {
                x:json.result.location.lng,
                y:json.result.location.lat
                }
             })
             .then(response => {
                  console.log("附近车位")
                  console.log(response)
                  this.parkingspaces=response.data.data
                  this.$message("列表展示已变为按离地址优先排列")
                })
             .catch(error => {
                   alert(error)
                })
        }).catch(err => {
          console.log(err)
        })
    },
    //分页查询车位信息
    // query(a,b){
    //    this.$http.get("/getParkingSpace",{
    //            params: {
    //                pageIndex:a,
    //                pageSize:b
    //              }
    //          })
    //          .then(response => {
    //               console.log(response)
    //               this.parkingspaces=response.data.data.records;
    //               console.log(this.parkingspaces)
    //             })
    //          .catch(error => {
    //                alert(error)
    //             })
    // },
    queryall(){
       this.$http.get("/getallParkingSpace",{
               params: {}
             })
             .then(response => {
                  console.log(response)
                  this.parkingspaces=response.data.data;
                })
             .catch(error => {
                   alert(error)
                })
    },
     handleEdit(index, row) {
       //获取用户车辆信息
       let userid= localStorage.getItem("loginUser");
       this.$http.get("/getcar",{
               params: {id:userid}
             })
             .then(response => {
                  console.log(response)
                  this.carinfo=response.data.data
                })
             .catch(error => {
                   alert(error)
                })
      //  if(userid==null){
      //    this.$message("请先进行登录");
      //    this.$router.push('/home');
      //    return
      //  }
        console.log(index, row);
        this.$http.get("/getlessor",{
               params: {id:row.lessorId}
             })
             .then(response => {
                  console.log(response)
                  this.lessorinfo=response.data.data
                  this.rentinfo=row
                })
             .catch(error => {
                   alert(error)
                })
        this.drawer=true;
      },
      submit(){
        console.log(this.value)
        //确认订单
        //查询用户是否有选择车牌号
        if(this.valuea==""){
          this.$message("请先选择车牌号哦");
          return
        }
        if(this.valueb==""){
          this.$message("请先选择支付方式哦");
          return
        }else if(this.valueb=="支付宝支付"){
        //修改订单表
        console.log(this.rentinfo)
        this.$http.get("/updateStatusById",{
               params: {
                id:this.rentinfo.rentMessageId,
                tenantryid:localStorage.getItem("loginUser")
               }
             })
             .then(response => {
                  console.log(response)
                  if(response.data.success){
                    this.$message("下单成功，请支付");
                     //跳转至支付页面
                     window.location.href="http://192.168.80.191:9090/pay?orderid="+this.rentinfo.rentMessageId+"66778899&money="+this.rentinfo.cost+"&name="+this.valuea+""
                  }else{
                    this.$message("抱歉，该车位已经被别人下单了");
                  }
                })
             .catch(error => {
                   alert(error)
                })
        }else if(this.valueb=="钱包支付"){
          //钱包支付
          this.$http.get("/payBywellt",{
               params: {
                 id:this.rentinfo.rentMessageId,
                 tenantryid:localStorage.getItem("loginUser"),
                 money:this.rentinfo.cost
                 }
             })
             .then(response => {
                  console.log(response)
                  this.$message(response.data.message)
                })
             .catch(error => {
                   alert(error)
                })
        }
        
      }, handler ({BMap, map}) {
          this.$jsonp('https://api.map.baidu.com/location/ip?ak=nx5he56j8XZDIhXpih2eSaG8OdcHcpqc&ip=&coor=bd09ll' , {
            }).then((res)=>{
            　//console.log(res);
                this.point=res.content.point;
                console.log(this.point)
                console.log("我来啦")
                var point = new BMap.Point(this.point.x, this.point.y);
                map.centerAndZoom(point, 13)
                var marker = new BMap.Marker(point) // 创建标注
                map.addOverlay(marker) // 将标注添加到地图中
                var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
                 map.addOverlay(circle)
            })
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
      this.$http.get("/nearbyparking",{
               params: {
                x:e.point.lng,
                y:e.point.lat
                }
             })
             .then(response => {
                  console.log("附近车位")
                  console.log(response)
                  this.parkingspaces=response.data.data
                  this.$message("列表展示已变为按离地址优先排列")
                })
             .catch(error => {
                   alert(error)
                })
    },
    
      

  },
  computed:{
      
  },
  mounted(){
      this.queryall();
  }
}


</script>
